import { Component, Input } from '@angular/core';

import { Hero } from './hero';

@Component({
  selector: 'hero-child',
  /**  
   * 为组件增加属性接口非常简单，只需要在Component注解的 
   * properties属性中声明组件的成员变量就可以了
   * age, country 可接受来自父组件的值
  */
  properties:["age", "country"],
  template: `
    <h3>{{hero.name}} says:</h3>
    <p>I, {{hero.name}}, am at your service, {{heroName}}. {{superBaby}}.</p>
    <p>年龄：{{age}}, 家乡：{{country}}<p>
  `
})
export class HeroChildComponent {
  @Input() hero: Hero; // 这里通过输入型绑定，把数据从父组件传递到子组件
  
  // 这里的 'receive' 就是接受自父组件的数据，
  // heroName  是一个别名
  @Input('receive') heroName: string; 

  // 不推荐用上面别名的形式
  @Input() superBaby: string; 

  constructor(){
     this.age = "35";
     this.country = "U.S.A";
  }
}